<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="../rem.js"></script>
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport"
    content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <!-- <link rel="stylesheet" href="../mui/mui.min.css"> -->
  <!-- <script src="../mui/mui.min.js"></script> -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="../common.css">
  <link rel="stylesheet" href="./newIndex.css">
  <script>
    function rembig() {
      setRemSize()
      window.addEventListener("resize", setRemSize, false)

      function setRemSize() {
        var width = document.documentElement.clientWidth
        if (width > 750) {
          width = 750
        }
        var _clientWidth = width / 7.5 + 'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()
  </script>
</head>

<body>
  <div class="container">
    <div class="content">

      <div class="box">
        <div class="banner">
          <img src="../images/newIndex/home_banner_img.png">
        </div>
        <div class="buttonGroup">
          <div class="item">
            <img src="../images/newIndex/home_ppjz_icon.png" />
            <span>品牌价值</span>
          </div>
          <div class="item">
            <img src="../images/newIndex/home_ppjz_icon.png" />
            <span>品牌价值</span>
          </div>
          <div class="item">
            <img src="../images/newIndex/home_ppjz_icon.png" />
            <span>品牌价值</span>
          </div>
          <div class="item">
            <img src="../images/newIndex/home_ppjz_icon.png" />
            <span>品牌价值</span>
          </div>
        </div>
        <div class="titleGroup">
          <div class="title">
            <img src="../images/newIndex/xghy_ywdw_img.png" alt="">
            <span>相关行业</span>
          </div>
        </div>
        <ul class="taskCellView" id="task">
          <div class="swiper-wrapper taskCellWrapper">
            <li class="taskCell swiper-slide">
              <img src="../images/newIndex/new_xghy_dw_img.png" ondragstart="return false;">
              <div class="taskSliderCenterContent">
                <p class="title needEllipsis">润滑油行业</p>
                <p class="classification needEllipsis">2019年度十大品牌</p>
                <div class="button">去看看</div>
              </div>
            </li>
            <li class="taskCell swiper-slide">
              <img src="../images/newIndex/new_xghy_dw_img.png" ondragstart="return false;">
              <div class="taskSliderCenterContent">
                <p class="title needEllipsis">润滑油行业</p>
                <p class="classification needEllipsis">2019年度十大品牌</p>
                <div class="button">去看看</div>
              </div>
            </li>
            <li class="taskCell swiper-slide">
              <img src="../images/newIndex/new_xghy_dw_img.png" ondragstart="return false;">
              <div class="taskSliderCenterContent">
                <p class="title needEllipsis">润滑油行业</p>
                <p class="classification needEllipsis">2019年度十大品牌</p>
                <div class="button">去看看</div>
              </div>
            </li>
          </div>
          <div class="swiper-pagination"></div>
        </ul>
      </div>

      <div class="partitionLine"></div>

      <div class="box">
        <div class="titleGroup">
          <div class="title">
            <img src="../images/newIndex/ppsj_ywdw_img.png" alt="">
            <span>相关行业</span>
          </div>
          <a class="more">更多 ></a>
        </div>

        <div class="middleView">
          <div class="swiper-wrapper">
            <a class="swiper-slide inside" href="#">
              <img class="item_img" src="../images/newIndex/home_rmbd_banner_img.png" alt="" class="banner_item">
              <div class="item_time">2019-06-01</div>
              <div class="item_brand">润滑油行业</div>
            </a>
            <a class="swiper-slide inside" >
              <img class="item_img" src="../images/newIndex/home_rmbd_banner_img.png" alt="" class="banner_item">
              <div class="item_time">2019-06-01</div>
              <div class="item_brand needEllipsis">润滑油行业ccczzzzzz</div>
            </a>
            <a class="swiper-slide inside">
              <img class="item_img" src="../images/newIndex/home_rmbd_banner_img.png" alt="" class="banner_item">
              <div class="item_time">2019-06-01</div>
              <div class="item_brand">润滑油行业2</div>
            </a>
          </div>
          <div class="middle-swiper-pagination"></div>
        </div>
      </div>
      <div class="partitionLine"></div>

      <div class="box">
        <div class="titleGroup">
          <div class="title">
            <img src="../images/newIndex/ppsj_ywdw_img.png" alt="">
            <span>相关行业</span>
          </div>
          <a class="more">更多 ></a>
        </div>
        <div class="listGroup">
          <a class="item">
            <div class="left">
              <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
            </div>
            <div class="right">
              <div class="title needEllipsis">这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉</div>
              <div class="description ellipsis">
                <span>
                    淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
                </span>
              </div>
            </div>
          </a>
          <a class="item">
            <div class="left">
              <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
            </div>
            <div class="right">
              <div class="title needEllipsis">这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉</div>
              <div class="description ellipsis">
                <span>
                    淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
                </span>
              </div>
            </div>
          </a>
          <a class="item">
            <div class="left">
              <img src="../images/newIndex/home_banner_img.png" alt="" srcset="">
            </div>
            <div class="right">
              <div class="title needEllipsis">这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉这是一个很好吃的糖果哦拉拉然这是一个很好吃的糖果哦拉拉</div>
              <div class="description ellipsis">
                <span>
                    淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器; 抽水马桶; 浴霸; 坐浴浴盆; 盥洗盆(卫生设备部件); 浴室装置;淋浴隔间; 卫生器械和设备; 消毒设备; 水净化设备和机器; 空气净化装置和机器装置和机器装置和机器抽水坐浴
                </span>
              </div>
            </div>
          </a>
        </div>
      </div>

      <div class="bottomInfo">
        <img src="../images/报名活动页_slices/WeChat0cb4f1f9fa69309f03cd06c58006f7f2.png">
        <div style="color: rgba(156,156,156,1)">客服电话：123456789</div>
        <div class="feedback"><span>意见反馈</span> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span>推荐参与活动</span></div>
        <div>中信品牌网</div>
      </div>

    </div>
  </div>
</body>

</html>
<script>
  $(document).ready(function () {
    var con = new Contact()
    con.addBackVote()
    con.addGoTop()
    con.addTopBack()
    con.addBackVote({href: '?????'})
    // setTimeout(() => {
    //   con.addBackVote({hide: true, href: '?????'})
    // }, 2000);
    // con.addGoTop()
    ellipsis()
    var swiper = new Swiper('.taskCellView', {
      slidesPerView: 'auto',
      pagination: {
        el: '.swiper-pagination',
      },
      // freeMode: true,
      mousewheel: true,
    });
    var swiperH = new Swiper('.middleView', {
      // init: false,
      // allowSlidePrev : false,      //禁止向左滑动
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      loopedSlides: 3,
      observeParents: true,
      // autoplay: true,
      // speed:1000,
      // autoplay : {
      //   delay:2000
      // },
      pagination: {
        el: '.middle-swiper-pagination',
      },
      resizeReInit: true,
      updateOnImagesReady: true,
      on: {
        progress: function (progress) {
          for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            modify = 1;
            // if (Math.abs(slideProgress) > 1) {
            //   modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            // }
            translate = slideProgress * modify * 5.72 + 'rem';
            scale = 1 - Math.abs(slideProgress) / 8;
            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            console.log(translate)
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex)
            slide.css('opacity', 1).addClass('shadow').css('background', 'transparent').children('img').css('opacity', 1).nextAll().css('opacity', 1)
            if (Math.abs(Math.round(slideProgress)) > 1) {
              slide.css('opacity', 0)
            } else if (Math.abs(Math.round(slideProgress)) == 1) {
              slide.removeClass('shadow').css('background', 'linear-gradient(180deg,rgba(177,0,0,0.3) 0%,rgba(255,255,255,0) 100%)')
                .children('img').css('opacity', 0).nextAll().css('opacity', 0)
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }

        }
      }
    });
  })
</script>